<template>
    <div>
        <el-checkbox-group v-model="checkArr" size="medium">
            <el-col :span=4 v-for="item in optionalColumnList" :key="item.prop">
                <el-checkbox :label="item.propName" @change="menuChange(item)"></el-checkbox>
            </el-col>
        </el-checkbox-group>
        <el-table border
                  style="width: 100%"
                  ref="multipleTable"
                  :data="tableData"
        >
            <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList"
                             :key="item.prop">
                <template slot-scope="scope">
                    <span>{{scope.row[scope.column.property]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteOne(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            update(row) {
                this.$router.push({
                    path: '/updateReader',
                    query: {
                        id: row.id
                    }
                });
            },
            deleteOne(row) {
                const _this = this;
                axios.delete('http://localhost:8081/reader/delete/' + row.id).then(function (resp) {
                    if (resp) {
                        // _this.$message(resp.data.message);
                        _this.$alert('《' + row.name + '》删除成功', '消息', {
                            confirmButtonText: '确定',
                            callback: action => {
                                window.location.reload();
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            page(currentPage) {
                const _this = this;
                axios.get('http://localhost:8081/reader/findAll/' + currentPage + '/3').then(function (resp) {
                    _this.tableData = resp.data.records;
                    _this.total = resp.data.total;

                })
            },
            menuChange(item) {
                // 注意  我这里都用的假数据，要从后台获取tableColumnList和dataList的时候
                //，每一次调用menuChange都要重新获取tableColumnList和dataList，保证属性和数据是对应的
                let flag = true
                for (let i = 0; i < this.checkArr.length; i++) {
                    if (this.checkArr[i] === item.propName) {
                        flag = false
                        break
                    }
                }
                if (!flag) {
                    this.tableColumnList.push(item)
                }
                if (flag) {
                    Array.prototype.contains = function (obj) {
                        var j = this.length;
                        while (j--) {
                            if (this[j] === obj) {
                                return j; // 返回的这个 i 就是元素的索引下标，
                            }
                        }
                        return false
                    }
                    this.tableColumnList.splice(this.tableColumnList.contains(item), 1)
                }
            },
        },
        created() {
            const _this = this;
            axios.get('http://localhost:8081/reader/findAll/1/3').then(function (resp) {
                _this.tableData = resp.data.records;
                _this.total = resp.data.total;
            })

        },
        data() {
            return {
                pageSize: 3,
                total: null,
                tableData: null,
                tableColumnList:
                    [
                        {prop: 'id', propName: 'ID'},
                        {prop: 'card', propName: '学号'},
                        {prop: 'name', propName: '名字'}
                    ],
                optionalColumnList:
                    [
                        // {prop: 'id', propName: 'ID'},
                        // {prop: 'card', propName: '学号'},
                        // {prop: 'name', propName: '名字'},
                        {prop: 'sex', propName: '性别'},
                        {prop: 'phone', propName: '手机号'},
                        {prop: 'address', propName: '住址'},
                        {prop: 'gmtCreate', propName: '注册时间'},
                        {prop: 'gmtModified', propName: '上次活动时间'}
                    ],
                checkArr: []
            }
        }
    }
</script>